<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/carton.css"/>
		<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
		<script>

			$(document).ready(function(){
				//复选框点击
				$('#IP_all').click(function(){
					$('#box input').prop('checked',$(this).prop("checked"));
				});
				//全选点击
				$("#btn_all").click(function(){
					$('#box input').prop('checked',true);
					$('#IP_all').prop('checked',true);
				});
				//取消点击
				$("#btn_canell").click(function(){
					$('#box input').prop('checked',false);
					$('#IP_all').prop('checked',false);
				});
				//反选点击
				$("#btn_res").click(function(){
					$('#box input').each(function(){
						$(this).prop('checked',!$(this).prop('checked'));
					})
					//修复反选问题
					$('#IP_all').prop('checked',method());
				})
				//修补全选问题
				$('#box input').click(function(){
					$('#IP_all').prop('checked',method());
				})
				//更正方法
				function method(){
					var flag = true;
					$('#box input').each(function(){
						if($(this).prop('checked')==false){
							flag = false;
						}
					})
					return flag;
				}
			});
		</script>
	</head>
	<body>
		<input type="checkbox" id="IP_all"/>
		<input type="button" id="btn_all" value="全选"/>
		<input type="button" name="btn_canell" id="btn_canell" value="取消" />
		<input type="button" name="btn_res" id="btn_res" value="反选" />
		<hr >
		<div id="box">
			<input type="checkbox"> <label>Java程序设计</label> <br />
			<input type="checkbox">	<label>SQL Server</label> <br />
			<input type="checkbox"> <label>Android程序开发</label> <br />
			<input type="checkbox"> <label>Winform</label> <br />
			<input type="checkbox"> <label>ASP.NET</label> <br />
			<input type="checkbox"> <label>.Core</label> <br />
		</div>
	</body>
</html>
